<template>
    <div class="catalog-main">
        <div class="com-header">
            <button class="back" @click="$router.go(-1)"><i></i></button>
            <span>{{name}}</span>
        </div>
        <div class="tab-wrapper">
            <span class="text">连载 共 {{directoryData.count}}章</span>
        </div>
        <div class="cover full-screen-window" v-if="presentMoneyTool" @click="presentMoneyTool=false"></div>
        <div class="choose-directory" v-if="presentMoneyTool">
            <p class="title">请选择章节</p>
            <ul>
                <li :class="{'active': selectIndex==i+1}" v-for="(item,i) in dicArr" :key="i">
                    <span @click="selectDic(i+1)">{{item}}</span><em v-if="selectIndex==i+1">√</em>
                </li>
           </ul>
        </div>
        <!-- 网页内容区域 -->
        <div class="view-content">
            <div id="topId"></div>
            <div class="top-tab">
                 <span class="sort" @click="sortAction"><i class="sort-icon"></i>{{sortText}}</span>
                 <span class="chooseDirectory" @click="presentMoneyTool=true">{{dicArr[selectIndex-1]}}<i><img src="~assets/image/header/down.png" alt=""></i></span>
            </div>
            <div class="wrapper">
                    <ul>
                        <li  v-for="(item,index) in directoryDataArr" :key="index" v-show="(index+1)>=minDicNum&(index+1)<=maxDicNum" :id="item.cId">
                            <router-link class="ellipsis" :class="{'redColor':item.cId==cId}" :title='item.name' :to="{path:'/read',query:{novelId:item.novelid,chapterId:item.oid,cId:item.cId,siteId:item.siteid}}">
                                {{item.name}}
                            </router-link>
                        </li>
                        
                    </ul>
            </div>
            <div class="footer-tab">
                <button @click="clickDicBtn(0)">上一页</button>
               <span class="chooseDirectory" @click="presentMoneyTool=true">{{dicArr[selectIndex-1]}}
                   <i><img src="~assets/image/header/down.png" alt=""></i>
                </span>
                <button @click="clickDicBtn(1)">下一页</button>
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import api from '~/plugins/api.js'
    import axios from 'axios'
    import Footer from "~/components/footer";
    export default {
        head() {
           return {
                title: `${this.name}最新章节目录 - ${this.name} 最佳来源 - 快眼看书`,
                meta: [{
                    name: "description",
                    content: `快眼看书提供《${this.name}》在“最佳来源”的最新章节目录的索引，更新超级快，无病毒无木马，页面干净清爽，希望大家收藏!`
                },{
                    name: "keyWords",
                    content: `${this.name}最新章节,圣墟 最佳来源`
                }]
           }
        },
        // watch
        data() {
            return {
                directoryData: {},
                cId: 0,
                name: '',
                sortTool: false,
                sortText: '反序',
                presentMoneyTool: false,
                directoryDataArr: [],
                count: 0,
                selectIndex: 1,
                fenNum: 0,
                minDicNum: 1,
                maxDicNum: 50,
                dicArr: []
            }
        },
        created() {
            
            if(!process.server&&!this.directoryData.list){
                this.initData()
                this.cId = this.$route.query.cId || 0
                this.name = this.$route.query.name || '目录'
            }
        },
        mounted() {
            this.$nextTick(() => { this.getlocal() })
            this.setDic()
        },
        methods: {
            setDic() {
                let _this = this
                let dicNum = this.directoryDataArr.length
                this.fenNum = this.directoryDataArr.length
                if(dicNum){
                    let count = parseInt(dicNum/50)+1
                    if(dicNum%50==0){
                        count = parseInt(dicNum/50)
                    }
                    this.count = count
                    console.log(this.count)
                    for(let i=0;i<count;i++){
                       _this.dicArr.push(_this.dicFilter(i))
                    }
                    console.log(this.dicArr)
                }
                
            },
            dicFilter(index){
                let a = index*50+1
                let b = index*50+50
                
                if(index == this.count-1){
                    b = this.directoryDataArr.length
                }
                return `${a}-${b}章`
            },
            selectDic(i) {
                this.selectIndex = i
                this.minDicNum = i*50-49
                this.maxDicNum = i*50
                    
                if(i == this.count){
                    this.maxDicNum = this.directoryDataArr.length
                }

                this.presentMoneyTool = false
                
            },
            clickDicBtn(type) {
                console.log(this.selectIndex,this.count)
                
                if(type==0){
                   if(this.selectIndex==1) {
                       Toast('当前已经是第一页')
                       return
                    }
                   this.selectDic(this.selectIndex-1) 
                }else{
                    if(this.selectIndex==this.count) {
                        Toast('当前已经是最后页')
                        return
                    }
                    this.selectDic(this.selectIndex+1)
                }
            },
            sortAction() {
                this.directoryDataArr = this.directoryDataArr.reverse()
                this.sortText = this.sortTool?'反序':'正序'
                this.sortTool = !this.sortTool
                this.dicArr.reverse()
                // let min = this.minDicNum
                // let max = this.maxDicNum 

                // if(this.sortTool){
                //     this.minDicNum = this.directoryDataArr.length - max
                //     this.maxDicNum = this.directoryDataArr.length - min
                //     this.$nextTick(() => { document.getElementById('topId').scrollIntoView() }) 
                // }else{
                //     this.minDicNum = this.directoryDataArr.length - max
                //     this.maxDicNum = this.directoryDataArr.length - min
                //     console.log('------',this.minDicNum,this.maxDicNum)
                //     this.$nextTick(() => { this.getlocal() })
                // }
                console.log(this.sortTool)
                 this.$nextTick(() => { this.getlocal() })
            },
            async initData() {
                let {query} = this.$route
                let res = await axios.get(api.directory,{params:query})
                if(res){
                    let data = res.data.data
                    this.directoryData = data
                    this.directoryDataArr = data.list
                    this.setDic()
                    this.$nextTick(() => { this.getlocal() })
                }
            },
            getlocal() {
                 if(this.cId){
                     let anchorElement = document.getElementById(this.cId)
                     if(anchorElement){
                         anchorElement.scrollIntoView()
                     }
                 }
                
            }
        },
        async asyncData({query,isServer}){
            if(process.server){
                let res = await axios.get(api.directory,{params:query})
                if(res){
                    let data = res.data.data
                    return {
                        directoryData: data,
                        cId:query.cId,
                        name:query.name,
                        directoryDataArr: data.list
                    }
                }
            }else{
                return {directoryData:{},directoryDataArr: []}
            }
        },
        components: {
            Footer
        }
   }
</script>